<template>
  <div>
    <van-nav-bar title="发布" />
    <van-cell-group>
      <div class="handLine">
        <van-cell-group>
          <van-field v-model="value" placeholder="请输入标题" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="cate_name" placeholder="请选择分类" @click="dj" />
        </van-cell-group>
      </div>

      <!-- 留言 -->
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入内容"
        show-word-limit
        color="pink"
      />
    </van-cell-group>
    <!-- 上传图片 -->
    <div class="icon">
      <van-uploader
        v-model="fileList"
        :after-read="afterRead"
        multiple
        :max-count="3"
      />
    </div>

    <div><button @click="present">发布</button></div>
    <!-- 弹出层 -->
    <van-popup v-model="shows" position="bottom" :style="{ height: '30%' }">
      <van-picker
        v-model="show"
        value-key="name"
        title="标题"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      name: "",
      value: "",
      value1: "",
      show: false,
      shows: false,
      message: "",
      cate_name: "",
      author: "",
      author_id: "",
      cate_id: "",
      columns: [],
      imageSrc: [],
      token: "",
      fileList: [],
      // Uploader 根据文件后缀来判断是否为图片文件
      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明

      //  创建新数组
    };
  },
  created() {
    this.getTable();
  },
  mounted() {
    // this.author.username= id.username,
    //  this.author_id.uid= id.uid,
  },
  methods: {
    async afterRead(file) {
      // 获取文件

      let files = file.file;
      let { type } = files;
      //       // 重新命名
      type = type.split("/")[1];
      //       // 重新命名
      let file_name = `${new Date().getTime()}_${Math.random()
        .toString(36)
        .slice(2)}.${type}`;
      //       // 获取接口

      //       // 去自己的服务器拿到上传七牛云需要的 token  为何放在服务端呢?  主要是为了安全，因为里边包含了一些账号信息
      // this.$http.post('/upload/token')
      // .then(res=>{
      //   console.log(res);
      // })
      let res = await this.$http.post("/upload/token");
      const formdata = new FormData();
      formdata.append("file", files);
      formdata.append("token", res.data.token);
      formdata.append("key", file_name);
      console.log(res);

      let result = await this.$http.post(
        "https://upload-z1.qiniup.com",
        formdata
      );
      console.log(result);
      console.log(result.data.key);
      console.log(`http://toutiao.longxiaokj.com/` + result.data.key);
      this.imageSrc.push(`http://toutiao.longxiaokj.com/`+result.data.key);

    },
    // 提交
    present() {
      // 文章列表
      //  调用登录页面接口
      let jstr = localStorage.getItem("user");
      let id = JSON.parse(jstr);
      //  验证一下是否少东西
      let cate_id = this.columns[this.id]._id;
      console.log(id.uid);
      let { value, message,cate_name,imageSrc} =this
      this.$http
        .post("/api/add_article", {
          title: value,
          content: message,
          cate_name,
          cate_id,
          author: id.nickname,
          author_id: id.uid,
          imageSrc,
        })
        .then((res) => {
          console.log(res);
           this.$router.go(0)
          // localStorage.setItem(u)
        });
       
    },
    getTable() {
      // 获取文章分类
      this.$http
        .post("/api/get_cate_list", {
          // 请求参数
        })
        .then((res) => {
          console.log(res);
          this.columns = res.data.data;
          // console.log(this.columns);
        });
    },

    onConfirm(name, index) {
      this.cate_name = name.name;
      this.shows = false;
      this.id = index;
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      this.shows = false;
    },
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    dj() {
      this.shows = true;
    },
  },
};
</script>

<style lang="less" scoped>
template {
  background-color: #ffffff;
}
button {
  margin-top: 40px;
  background-color: pink;
  width: 300px;
  height: 50px;
}
.handLine {
  width: 100%;
}
.handLine {
  margin-right: 270px;
}
.icon {
  float: left;
}
</style>